<template>
	<div class="address-edit-box">
		<nav-bar class="nav-bar">
			<template v-slot:default>
				{{ title() }}
			</template>
		</nav-bar>

		<van-address-edit
			:address-info="addressInfo"
			:area-columns-placeholder="['请选择', '请选择', '请选择']"
			:area-list="areaList"
			:search-result="searchResult"
			:show-delete="type === 'edit'"
			class="edit"
			show-search-result
			show-set-default
			@delete="onDelete"
			@save="onSave"
		/>

	</div>
</template>

<script setup>
import NavBar from "@/components/common/navbar/NavBar";
import {onMounted, reactive, toRefs} from "vue";
import {tdist} from "@/utils/address";
import {addAddress, deleteAddress, editAddress, getAddressDetail} from "@/network/address";
import {showSuccessToast} from "vant";
import {useRoute, useRouter} from "vue-router";

const state = reactive({
	areaList: {
		province_list: {},
		city_list: {},
		county_list: {}
	},
	searchResult: [],
	addressInfo: {},
	type: 'add',
	addressId: '',
	title: ''
})
let {areaList, searchResult, addressInfo, type} = toRefs(state)
const route = useRoute()
const router = useRouter()
// 获取省市区列表
const getCityList = () => {
	// 构造省市区列表
	let _province_list = {};
	let _city_list = {};
	let _county_list = {}
	tdist.getLev1().forEach(itemLv1 => {
		_province_list[itemLv1.id] = itemLv1.text;
		tdist.getLev2(itemLv1.id).forEach(itemLv2 => {
			_city_list[itemLv2.id] = itemLv2.text;
			tdist.getLev3(itemLv2.id).forEach(itemLv3 => {
				_county_list[itemLv3.id] = itemLv3.text;
			})
		})
	})
	state.areaList.province_list = _province_list;
	state.areaList.city_list = _city_list;
	state.areaList.county_list = _county_list;
}

// 判断动作类型（新增/修改）
const title = () => {
	return state.type === 'add' ? '新增地址' : '编辑地址'
}
// 修改标题
const changeTitle = () => {
	const {type, addressId} = route.query
	state.type = type;
	state.addressId = addressId
}
// 保存地址
const onSave = (content) => {
	const {name, tel, province, city, county, addressDetail, isDefault} = content;
	console.log(content)
	const params = {
		name,
		phone: tel,
		province,
		city,
		county,
		address: addressDetail,
		is_default: isDefault ? 1 : 0
	}
	// 判断是修改操作还是保存操作
	if (state.type === 'add') {
		addAddress(params).then(res => {
			if (res.status === 201) {
				// 显示成功
				showSuccessToast('添加成功');
				// 一秒后跳转到地址页
				setTimeout(() => {
					router.back()
				}, 1000)
			}
		})
	} else if (state.type === 'edit') {
		editAddress(state.addressId, params).then(res => {
			console.log(res)
			if (res.status === 204) {
				// 显示成功
				showSuccessToast('修改成功');
				// 一秒后跳转到地址页
				setTimeout(() => {
					router.back()
				}, 1000)
			}
		})
	}

}
// 删除地址
const onDelete = () => {
	deleteAddress(state.addressId).then(res => {
		if (res.status === 204) {
			// 显示成功
			showSuccessToast('删除成功');
			// 一秒后跳转到地址页
			setTimeout(() => {
				router.back()
			}, 1000)
		}
	})
}
// 将修改信息添加到页面
const addMsg = () => {
	if (state.type === 'edit') {
		const {addressId} = route.query

		getAddressDetail(addressId).then(res => {
			const {name, phone, province, city, county, address, is_default} = res;
			state.addressInfo = {
				name, tel: phone, province, city, county, addressDetail: address, isDefault: is_default
			}
		})
	}
}
// 初始化
onMounted(() => {
	// 获取省市区列表
	getCityList()
	// 修改标题
	changeTitle()
	// 将修改信息渲染到页面
	addMsg()
})

</script>

<style lang="scss">
.edit {
	.van-field__body {
		textarea {
			height: 26px !important;
		}
	}
}

.address-edit-box {
	margin-top: 44px;

	.van-address-edit {
		.van-button--danger {
			background: var(--color-tint);
			border-color: var(--color-tint);
		}

		.van-switch--on {
			background: var(--color-tint);
		}
	}
}

</style>
